<template>
  <div class="hsx-role-management">
    <!-- 角色权限 -->
    <Vmask
      :maskTitle="maskTitle"
      :maskData="maskData"
      :showMask="showMask"
      :maskWidth="maskWidth"
      @FnMask="FnMask"
    ></Vmask>
    <div class="hsx-routre-title">
      <div class="routre-title-content">
        <span>
          <i class="el-icon-discount mr10"></i>角色管理
        </span>>
        <span>{{routerTitle}}</span>
      </div>
    </div>
    <div class="hsx-role-management-content clearfix">
      <div class="hsx-role-management-menu w150 fl">
        <el-menu default-active="rolePermissions" class="el-menu-vertical-demo lh40" :router="true">
          <el-menu-item index="rolePermissions">
            <i class="el-icon-d-arrow-right hsx-icon"></i>
            <span slot="title">角色权限</span>
          </el-menu-item>
          <el-menu-item index="postType">
            <i class="el-icon-d-arrow-right hsx-icon"></i>
            <span slot="title">岗位类型</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="hsx-role-management-right bgc">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import ShowTable from "../components/table/show-table"
import Vmask from "../components/v-mask/v-mask"
import PermissionsDetails from "./permissions-details"//角色权限详情
import {mapGetters} from 'vuex'
export default {
  name: '',
  data(){
    return {
      routerTitle:'',
      showPermissionsDetails:false,//是否展示权限详情
      activeTabsName:'rolePermissions',
      roleId:'',
      roleName:'',
      tableData:[
        {
          id:'1',
          n2:'n2'
        }
      ],
      selections:false,
      lableList:{
        n3:'ID',
        n1:'角色名称',
        n2:'角色编码',
      },
      talLength:0,
      pageSize:15,
      pageNum:1,
      maskTitle:'',
      maskData:{},
      showMask:false,
      maskWidth:'400px',
    }
  },
  props:[],
  created(){
    if(this.getPermissionControl.role_permission) {
      this.$router.push({name:'rolePermissions'})//角色权限
    }else if(this.getPermissionControl.job_category) {
      this.$router.push({name:'postType'})//岗位类型
    }
  },
  mounted(){

  },
  methods:{
    FnTabs (e) {
      this.activeTabsName = e;
      this.$router.push({name:e})
    },
    handleClick(tab, event) {
        console.log(tab, event);
    },
    FnMask(e) {
      console.log(e,'弹框发生的事件')
      if(e.type=='false'){//关闭弹框
        this.showMask = false;
        this.maskTitle = '';
        this.maskData = {}
      }
    },
    getSortableFn(e) {
      
    }
  },
  components:{
    ShowTable,
    Vmask,
    PermissionsDetails
  },
  computed:{
    ...mapGetters(['getPermissionControl']),
  },
  watch:{
    '$route': function (newVal, oldVal) {
      if(newVal.meta) {
       this.routerTitle = newVal.meta.title
      }
    },
  }
}
</script>
// <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.hsx-role-management {
  .hsx-role-management-left {
    width: 200px;
  }
  .hsx-role-management-right {
    padding: 0 15px 50px 5px;
    overflow: auto;
    .role-permissions-content {
      .role-permissions-content-left {
      }
      .role-permissions-content-left-table {
        // width: 290px;
      }
      .role-permissions-content-right {
        margin-left: 260px;
        .role-permissions-content-right-condition {
          height: 50px;
        }
        .role-permissions-content-tabs {
          .role-permissions-content-tabs-title {
            height: 45px;
          }
          .role-permissions-content-tabs-content {
          }
          .el-tabs__nav-wrap::after {
            background-color: palegoldenrod !important;
          }
        }
      }
    }
  }
}
</style>